/**
 * @ResizeObserver 监听元素变化的API
 * @entries 元素变化的数组集合
 * @entry 每个被监听的元素 其中包含的属性有：
 *    borderBoxSize：边框盒尺寸
 *    contentBoxSize：内容盒尺寸
 *    contentRect:内容区域矩形信息 => DOMRectReadOnly {x: 0, y: 0, width: 3800, height: 3800, top: 0, …}
 *    devicePixelContentBoxSize:DPR尺寸
 *    target：哪一个元素发生变化
 */
import { debounce } from '@/utils/tools'
const map = new WeakMap()
const ob = new ResizeObserver(
  debounce((entries) => {
    for (let entry of entries) {
      const handler = map.get(entry.target)
      handler &&
        handler({
          width: entry.borderBoxSize[0].inlineSize,
          height: entry.borderBoxSize[0].blockSize,
        })
    }
  }, 500),
)
const resize = {
  mounted(el, binding) {
    map.set(el, binding.value)
    ob.observe(el)
  },
  unmounted(el) {
    ob.unobserve(el)
  },
}

// export default {
//   install: (app) => {
//     app.directive('resize', resize)
//   },
// }
export default resize
